<template>
  <view class="list">
    <view class="main" v-for="(item, i) in list" :key="i">
      <view class="itemTop" @click="gotoDetail(item.PTASKNO)">
        <p>订单号：{{ item.PTASKNO }}</p>
        <view
          :class="{
            tag: true,
            pending:
              item.STATUS == '待处理' ||
              item.STATUS == '等待派车' ||
              item.STATUS == '前往接货' ||
              item.STATUS == '接单成功',
            toSign: item.STATUS == '待签收',
            Completed: item.STATUS == '已完成',
            undone: item.STATUS == '撤销',
          }"
          >{{ item.STATUS }}</view
        >
      </view>
      <h3 @click="gotoDetail(item.PTASKNO)">{{ item.SHIPPER }}</h3>
      <view class="address" @click="gotoDetail(item.PTASKNO)">{{
        item.SHIPPERADDRESS
      }}</view>
      <view class="itemBottom">
        <p>{{ item.STRINPUTTIME }}</p>
        <nut-button
          v-if="
            item.STATUS == '待处理' ||
            item.STATUS == '等待派车' ||
            item.STATUS == '前往接货' ||
            item.STATUS == '接单成功'
          "
          class="cancelBtn"
          type="default"
          @click="cancel(item)"
          >取消订单</nut-button
        >
      </view>
    </view>
    
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { onMounted, ref, reactive, watch } from "vue";
import useMyOrderStore from "../../../store/myOrder";
import { $post } from "../../../@api/index";
import { type OrderList } from "../types";

const store = useMyOrderStore();

const props = defineProps<{
  list: OrderList[];
}>();
const emit = defineEmits<{
  (
    e: "cancelOrder",
    msg: string,
  );
}>();

//跳转到详情
function gotoDetail(PTASKNO: string) {
  store.ptaskno = PTASKNO;
  Taro.navigateTo({
    url: "/pages/myOrder/detail",
  });
}
//取消订单按钮
async function cancel(item: OrderList) {
  let res = await $post<{ code: number; msg: string }>(
    "/tgMyOrder/cancelOrder",
    {
      openId: "oN9cn09rkm0cceEHq1VUfCd4LP4k",
      orderId: item.V11,
      // orderId: item.PTASKNO,
    }
  );
 emit("cancelOrder",res.data.msg)
}
</script>
<style lang="less">
.pending {
  background: rgba(9, 102, 255, 0.16);
  color: #0966ff;
}
.toSign {
  background: rgba(255, 146, 0, 0.16);
  color: #ff9200;
}
.Completed {
  background: rgba(8, 191, 96, 0.16);
  color: #08bf60;
}
.undone {
  background: rgba(153, 153, 153, 0.16);
  color: #999999;
}
.list {
  height: calc(83vh);
  width: 100%;
  overflow-y: scroll;
  background: rgb(228, 228, 228);
  padding: 0 24rpx;
  padding-bottom: 16rpx;
  box-sizing: border-box;
  .main {
    height: 300rpx;
    background: white;
    border-radius: 12rpx;
    box-sizing: border-box;
    padding: 28rpx 24rpx;
    margin-top: 16rpx;
    h3 {
      font-size: 32rpx;
      margin-top: 20rpx;
    }
    .address {
      font-size: 24rpx;
      color: #666666;
    }
    .itemBottom {
      display: flex;
      justify-content: space-between;
      margin-top: 36rpx;
      p {
        font-size: 24rpx;
        color: #999999;
        line-height: 56rpx;
      }
      .cancelBtn {
        height: 56rpx;
        width: 175rpx;
        font-size: 24rpx;
        line-height: 56rpx;
      }
    }
    .itemTop {
      display: flex;
      justify-content: space-between;
      p {
        font-size: 22rpx;
      }
      .tag {
        width: 120rpx;
        height: 36rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        text-align: center;
      }
    }
  }
}
</style>
